<template>
    <div style="height:100%;width:100%;position:relative;">
        <div class="pagetop">
            <div class="top-button">
                <el-button @click="btnQuery" icon="el-icon-search" v-has="'PADD'" type="primary">查询</el-button>
                <el-button @click="btnAdd" icon="el-icon-plus" v-has="'PADD'" :disabled="bChangeFlag">新增</el-button>
                <el-button @click="btnDel" icon="el-icon-delete" v-has="'PDELETE'" :disabled="detailData.parentitemclassid=='-1'? true:bChangeFlag">删除</el-button>
                <el-button @click="btnSave" icon="el-icon-document" v-has="'PMODIFY'" :disabled="!bChangeFlag">保存</el-button>
                <el-button @click="btnCancel" icon="el-icon-close" :disabled="!bChangeFlag">取消</el-button>
                <el-button icon="el-icon-close" @click="btnExc">退出</el-button>
            </div>
        </div>
        <div class="pagecenter">
            <rm-layout-right :fixsize=520 :splitwidth=5 :minfixsize=200 :maxflxsize=2000>
                <div class="tree">
                    <el-tree :props="treeProps" :load="LoadNode" node-key="itemclasscode" lazy :default-current-keys="defaultExpandKeys" @node-click="NodeClick" :highlight-current="true" ref="tree" :render-after-expand="true" empty-text="请先选择分类">
                    </el-tree>
                </div>
                <template v-slot:fix>
                    <div style="width:100%;float:left;height:100%;border:1px solid #ccc;overflow:auto;">
                        <div>
                            <table class="edit" style="padding:5px;border-collapse:separate; border-spacing:3px 4px;">
                                <tr>
                                        <td>分类代码</td>
                                    <td colspan=1>
                                        <el-input v-model="detailData.itemclasscode" ref="input0" maxlength="3" minlength="3" :disabled="true"></el-input>
                                    </td>
                                    <!-- <td>分类ID</td> -->
                                    <!-- <td>
                                        <el-input style="width:100%;" v-model="detailData.itemclasscode" :disabled="true"></el-input>
                                    </td> -->
                                    <td>上级分类</td>
                                    <td>
                                        <el-input style="width:100%;" v-model="detailData.parentna" :disabled="true"></el-input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>分类层次</td>
                                    <td>
                                        <el-input style="width:100%;" v-model="detailData.classlevel" :disabled="true"></el-input>
                                    </td>
                                    <td>存在子类</td>
                                    <td>
                                        <el-checkbox style="width:100%;" v-model="detailData.havechild" true-label="1" false-label="0" disabled></el-checkbox>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="color:#F56C6C">分类名称</td>
                                    <td colspan=3>
                                        <el-input v-model="detailData.itemclassname" ref="input1" @keyup.enter.native="NextFocus(1)" @input="GetInputCode" @focus="Focus($event)"></el-input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>助记符</td>
                                    <td>
                                        <el-input style="width:100%;" v-model="detailData.inputcode" ref="input2" @keyup.enter.native="NextFocus(2)" @focus="Focus($event)" @input="HasChange"></el-input>
                                    </td>

                                </tr>
                                <tr>
                                    <td style="vertical-align:top">备注</td>
                                    <td colspan=3>
                                        <el-input type="textarea" :rows="3" v-model="detailData.comments" ref="input4" @keyup.enter.native="NextFocus(4)" @focus="Focus($event)" @input="HasChange"></el-input>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </template>
                <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="提示" :visible.sync="bDelVisable " width="500px" height="300px">
                    <span class="el-icon-warning">确定删除<b> 分类:</b><b style="color:#F56C6C">{{delNa}} </b>的记录吗？</span>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="btnDelComfirm">确 定</el-button>
                        <el-button @click="btnCancel(1)" :autofocus="true">取 消</el-button>
                    </span>
                </el-dialog>
            </rm-layout-right>
        </div>
    </div>
</template>

<script type="text/javascript">
import { Promise } from "q";
import XEUtils from "xe-utils";
export default {
    name: "MNG235",
    data() {
        return {
            bLoading: false,
            bDelVisable: false,
            bCopyVisable: false,
            bChangeFlag: false,
            itemclasscode: -1, //节点
            fatherlocid: -1, //父节点
            delNa: "", //删除的分类名
            actionindex: "M",
            tpNode: {},
            prTpNode: {},
            childNode: {},
            detailData: {
                parentitemclassid: null,
                regionlevel: null,
                havechild: "",
                itemclasscode: "",
                itemclassname: "",
                inputcode: "",
                description: "",
                parentna: "",
            },
            treeProps: {
                label: "name",
                children: "children",
                isLeaf: "leaf",
            },
            popData: {
                //表达式弹窗数据
                librid: 0,
                validtypeno: "",
                validtypename: "",
                validformula: "",
                description: "",
            },
            tmpdetailData: {},
            defaultExpandKeys: [0],
        };
    },
    created() {
        this.defaultExpandKeys = [2];
    },
    updated() {},
    methods: {
        // ------------------------------左侧树--------------------------//
        //点击事件
        NodeClick(data, node, key) {
            if (this.bChangeFlag) {
                this.$refs.tree.setCurrentKey(this.tpNode.data.itemclasscode);
                return false;
            } else {
                this.detailData = {};
                this.tpNode = node; //节点
                this.prTpNode = node.parent; //父节点
                this.itemclasscode = this.$refs.tree.getCurrentNode(node.children).itemclasscode;
                this.actionindex = "M";
                this.detailQuery(this.itemclasscode);
            }
        },
        getCurrentData() {
            //用于更新删除、新增的数据   getCurrentNode 获取的是data getNode(key or data) 获取结点
            this.detailData = {};
            this.tpNode = this.$refs.tree.getNode(this.$refs.tree.getCurrentNode());
            this.prTpNode = this.$refs.tree.getNode(this.$refs.tree.getCurrentNode()).parent;
            this.itemclasscode = this.$refs.tree.getCurrentNode().itemclasscode;
        },
        //懒加载
        async LoadNode(node, resolve) {
            //展开第一级节点，从后台加载一级节点列表
            if (node.level == 0) {
                this.node_had = node;
                this.resolve_had = resolve;
                var data = await this.GetFatherTree(this.itemclasscode);
                return resolve(data);
            } else if (node.level >= 1) {
                //展开其他子节点，动态从后台加载下一级节点列表
                var data = await this.GetChildTree(node.data.itemclasscode, node);
                if (data.length == 0) {
                    node.leaf = true;
                }
                return resolve(data);
            }
        },
        btnQuery() {
            //选择对应样本库的树 缺少记录当前展开的方法 暂不使用
            this.itemclasscode = "-1";
            this.node_had.childNodes = []; //把存起来的node的子节点清空，避免出现重复树.
            this.LoadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法,载入新的树节点
        },
        btnRefreshLoc(node) {
            //重新加载子节点
            node.loaded = false;
            node.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
        },
        async GetFatherTree() {
            console.log("ft");
            //父节点:加载第一级节点
            try {
                let tempNode = [];
                const res = await this.$tool.request({
                    url: "MNG/MNG2/MNG235",
                    method: "post",
                    data: {
                        action: "getFatherNode",
                        itemclasscode: this.itemclasscode,
                    },
                });
                if (res.RData.Data) {
                    res.RData.Data.forEach((item) => {
                        let node = {};
                        node.name = item.itemclassname;
                        node.itemclasscode = item.itemclasscode;
                        tempNode.push(node);
                        this.fatherlocid = item.itemclasscode;
                    });
                }
                setTimeout(() => {
                    this.$refs.tree.setCurrentKey(res.RData.Data[0].itemclasscode);
                    this.getCurrentData();
                    this.$refs.tree.store.nodesMap[res.RData.Data[0].itemclasscode].expanded = false;
                    setTimeout(() => {
                        this.detailQuery(res.RData.Data[0].itemclasscode);
                    }, 15);
                }, 80);
                return tempNode;
            } catch (e) {
                this.$message.warning(e.message);
            }
        },
        async GetChildTree(itemclasscode, Node) {
            //子节点:每次加载下一级子节点
            try {
                let tempNode = [];
                const res = await this.$tool.request({
                    url: "MNG/MNG2/MNG235",
                    method: "post",
                    data: {
                        action: "getChildNode",
                        itemclasscode: itemclasscode,
                    },
                });
                if (res.Data) {
                    res.Data.forEach((item) => {
                        let node = {};
                        node.name = item.itemclassname;
                        node.itemclasscode = item.itemclasscode;
                        node.leaf = false;
                        tempNode.push(node);
                    });
                }
                return tempNode;
            } catch (e) {
                this.$message.warning(e.message);
            }
        },
        /*-----------------------------按钮类-----------------------------*/
        /*左侧树 右键菜单 */
        btnAdd() {
            if (this.$refs.tree.getCurrentNode() == null) {
                //未选择节点，取消操作
                this.$message.info("请先选择一条分类数据。");
            } else {
                console.log(this.tmpdetailData);
                this.bChangeFlag = true;
                this.detailData = {
                    itemclasscode: "",
                    parentclasscode: this.tmpdetailData.itemclasscode,
                    parentna: this.tmpdetailData.itemclassname + "(" + this.tmpdetailData.itemclasscode + ")",
                    classlevel: XEUtils.toNumber(this.tmpdetailData.classlevel) + 1,
                    havechild: 0,
                    comments: "",
                };
                setTimeout(() => {
                    this.$refs.input1.focus();
                }, 15);
            }
        },
        btnDel() {
            if (this.dontdel == "2") {
                this.$message({ type: "error", message: "获取数据失败，禁止删除！" });
                return false;
            } else if (this.dontdel == "1") {
                this.$message({ type: "error", message: "当前分类下存在采购中心或医院,禁止删除!" });
                return false;
            } else {
                var node = this.$refs.tree.getCurrentNode();
                this.delNa = node.name;
                this.bDelVisable = true;
            }
        },
        btnDelComfirm() {
            this.bDelVisable = false;
            let that = this;
            this.$tool
                .request({
                    url: "MNG/MNG2/MNG235",
                    method: "post",
                    data: {
                        action: "itemclassdel",
                        itemclasscode: this.itemclasscode,
                    },
                })
                .then((res) => {
                    if (res.errorcode == "1") {
                        this.$pub.message(this, "删除成功！", "success");
                        this.actionindex = "M";
                        this.detailData = {};
                        this.delNa = "";
                        this.btnRefreshLoc(this.prTpNode);
                        this.$refs.tree.setCurrentKey(res.keyid);
                        this.getCurrentData();
                        this.detailQuery(res.keyid);
                        //是删除操作
                    } else {
                        this.$message.error("删除失败！" + res);
                    }
                })
                .catch((e) => {
                    this.$message.error(e);
                });
        },
        async detailQuery(itemclasscode) {
            try {
                const res = await this.$tool.request({
                    url: "MNG/MNG2/MNG235",
                    method: "post",
                    data: {
                        action: "detailQuery",
                        itemclasscode: itemclasscode,
                    },
                });
                if (res.regionlist.length > 0) {
                    this.detailData = res.regionlist[0];
                } else {
                    this.detailData = {};
                }
                this.tmpdetailData = XEUtils.clone(this.detailData, true);
            } catch (e) {
                this.$alert(e, "出错");
            }
        },
        //保存
        async btnSave() {
            if (!this.detailData.itemclassname) {
                this.$alert("分类名称不能为空！");
                this.$refs.input1.focus();
                return false;
            }
            try {
                const res = await this.$tool.request({
                    url: "MNG/MNG2/MNG235",
                    method: "post",
                    data: {
                        action: "itemclassSave",
                        parentitemclasscode: this.tmpdetailData.itemclasscode,
                        data: this.detailData,
                    },
                });
                if (res.errcode == "1") {
                    this.$pub.message(this, "保存成功！", "success");
                    if (res.actionindex == "A") {
                        //新增刷新父节点
                        this.btnRefreshLoc(this.tpNode);
                    } else if (res.actionindex == "M") {
                        //修改刷新当前节点
                        this.btnRefreshLoc(this.prTpNode);
                    }
                    setTimeout(() => {
                        this.$refs.tree.setCurrentKey(res.keyid);
                        this.getCurrentData();
                        setTimeout(() => {
                            this.detailQuery(res.keyid);
                        }, 15);
                    }, 80);
                    this.bChangeFlag = false;
                } else {
                    this.$message({ message: res.obj, type: "error" });
                }
            } catch (e) {
                console.log(e);
                this.$message({ message: e, type: "error" });
            }
        },
        btnCancel() {
            this.$confirm("您确定要取消这次改动吗？", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.bChangeFlag = false;
                    this.bDelVisable = false;
                    this.detailQuery(this.itemclasscode);
                })
                .catch((e) => {
                    this.$$message.error(e);
                });
        },
        btnExc() {
            let index = this.$parent.$refs.itemtags.tagsList.findIndex((m) => m.name == "MNG235");
            this.$parent.$refs.itemtags.tagsList.splice(index, 1);
            this.$router.go(-1);
        },
        // 焦点跳转
        NextFocus(index) {
            var focusIndex = index + 1;
            var that = this;
            if (index < 4) {
                setTimeout(function () {
                    if (index == 3) that.$refs["input" + index].$refs.ddlmainSelect.blur();
                    if (index != 2) that.$refs["input" + focusIndex].focus();
                    else that.$refs["input" + focusIndex].$refs.ddlmainSelect.focus();
                }, 5);
            }
        },
        GetInputCode() {
            this.bChangeFlag = true;
            this.detailData.inputcode = this.$pub.CreateInputcode(this.detailData.itemclassname, this, 16);
        },

        Focus(event) {
            //点击触发文本内容全选
            event.currentTarget.select();
        },
        HasChange() {
            this.bChangeFlag = true;
        },
    },
};
</script>
<style scoped>
.pagetop {
    width: 100%;
    height: 35px;
    display: -webkit-box;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    border: 1px solid #ccc;
    position: absolute;
    font-size: 12px;
    z-index: 99;
    overflow-x: auto;
    white-space: nowrap;
}
.pagetop .top-table {
    float: right;
}
.top-button {
    right: 5px;
    position: absolute;
    top: 5px;
    display: flex;
    align-items: center;
}
.pagecenter {
    position: absolute;
    top: 40px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}
.RightBack {
    background-color: white;
}
.el-tree {
    min-width: 100%;
    font-size: 14px;
    display: inline-block;
}
.tree {
    overflow-y: auto;
    overflow-x: scroll;
    height: 100%;
    border: 1px solid #ccc;
}
::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: #b6e8ff;
    font-weight: 700;
}
table.edit tr td:nth-child(odd) {
    text-align: right;
    font-size: 12px;
    white-space: nowrap;
}
table.edit tr td:nth-child(even) {
    text-align: left;
}
::v-deep .el-button.is-disabled {
    border: 0px;
    color: grey;
    background-color: #e6e6e6;
    font-weight: normal;
}
::v-deep .innerRight.el-input.el-input__inner. {
    text-align: right !important;
}
::v-deep .el-textarea__inner {
    padding: 3px 5px;
}
::v-deep .el-input.is-disabled .el-input__inner {
    color: #606266;
}
::v-deep .vxe-table .vxe-body--column.col-orange {
    background-color: #f8f8f8;
}
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    border-color: #000000;
}
::v-deep tr.vxe-body--row.row--current {
    color: #000000;
    font-weight: bold;
}
</style>